﻿<Page
    x:Class="PuzzleModern.Phone.ItemPage"    
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PuzzleModern"
    xmlns:phone="using:Microsoft.Phone.Shell"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    PointerMoved="pageRoot_PointerMoved"
    PointerCanceled="pageRoot_PointerReleased"
    PointerCaptureLost="pageRoot_PointerReleased" 
    PointerReleased="pageRoot_PointerReleased">

    <Page.Resources>
        <Storyboard x:Name="BusyOverlayAppearingStoryboard">
            <DoubleAnimation
                Storyboard.TargetName="BusyOverlay"
                Storyboard.TargetProperty="Opacity"
                From="0"
                To="0.8"
                Duration="0:0:1"
                Completed="DoubleAnimation_Completed"
                >
                <DoubleAnimation.EasingFunction>
                    <CircleEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="BusyOverlayDisappearingStoryboard">
            <DoubleAnimation
                x:Name="BusyOverlayDisappearingAnimation"
                Storyboard.TargetName="BusyOverlay"
                Storyboard.TargetProperty="Opacity"
                Duration="0:0:0.5"
                From="0.8"
                To="0"
                Completed="BusyOverlayDisappearingAnimation_Completed"
                >
            </DoubleAnimation>
        </Storyboard>
    </Page.Resources>
    
    <Grid>
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!-- Title Panel -->
        <StackPanel Grid.Row="0" Margin="19,4,0,0">
            <TextBlock Text="{Binding PuzzleNameUpper}" Style="{ThemeResource TitleTextBlockStyle}" Margin="0,12,0,0" />
        </StackPanel>

        <Grid Margin="0,14,0,0" Grid.Row="1">
            <Border x:Name="GameBorder" Background="{Binding PageBackground}" SizeChanged="GameBorder_SizeChanged">
                <local:Direct2DPuzzleCanvas x:Name="DrawCanvas"
                                            PointerPressed="DrawCanvas_PointerPressed" />
            </Border>
            <Border x:Name="BusyOverlay" Background="{Binding PageBackground}" IsHitTestVisible="False">
                <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <ProgressBar x:Name="BusyIndicator" Width="480"  Foreground="Black" Margin="0,0,0,0"/>
                    <TextBlock x:Name="BusyLabel" Foreground="Black" FontSize="24" Grid.Row="1" HorizontalAlignment="Center"></TextBlock>
                </Grid>
            </Border>
        </Grid>

        <Border Grid.Row="2" Background="{Binding PageBackground}">
            <TextBlock x:Name="PuzzleStatusBar"  Foreground="Black" Text="" Style="{ThemeResource TitleTextBlockStyle}" Margin="4"/>
        </Border>
        
        <Grid Grid.Row="3">

            <!-- TODO: Resize to 2 rows when there's a lot of buttons on screen -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <local:PuzzleKeyboard x:Name="VirtualButtonBar" Height="50" ButtonPressed="VirtualButtonBar_ButtonPressed" Background="{Binding PageBackground}" />
        </Grid>

        <Popup x:Name="CompletePopup" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Center" IsLightDismissEnabled="True">
            <Popup.ChildTransitions>
                <TransitionCollection>
                    <PopupThemeTransition />
                </TransitionCollection>
            </Popup.ChildTransitions>

            <Border HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="{ThemeResource PhoneBackgroundBrush}" Width="{Binding PageWidth}" Height="200" Margin="0,150,0,0">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <TextBlock Text="Congratulations!" FontSize="24" Grid.ColumnSpan="3" Padding="15,15,0,0" />
                    
                    <local:TileButton Grid.Row="1" Grid.Column="0" Click="NewButton_Click" Label="New game" Background="#008000">
                        <!-- appbar.puzzle.round icon from ModernUIIcons.com -->
                        <Canvas Width="76" Height="76">
                            <Path Width="45.1667" Height="45.1667" Canvas.Left="18.5833" Canvas.Top="13.8334" Stretch="Fill" Fill="White" Data="F1 M 37.2083,15.8334C 46.7083,19 35.625,20.5833 41.1667,25.3333L 52.25,25.3334L 52.25,36.4167C 57,41.9584 58.5833,30.875 61.75,40.375C 58.5833,49.875 57,38.7917 52.25,44.3334L 52.25,57L 41.1667,57C 35.625,52.25 46.7083,50.6667 37.2083,47.5C 27.7083,50.6667 38.7917,52.25 33.25,57L 20.5833,57L 20.5833,44.3333C 25.3333,38.7917 26.9167,49.875 30.0833,40.375C 26.9167,30.875 25.3333,41.9583 20.5833,36.4167L 20.5833,25.3333L 33.25,25.3333C 38.7916,20.5833 27.7083,19 37.2083,15.8334 Z "/>
                        </Canvas>
                    </local:TileButton>

                    <local:TileButton Grid.Row="1" Grid.Column="1" Click="TypeButton_Click" Label="Change type" Background="#008000">
                        <!-- appbar.protractor icon from ModernUIIcons.com -->
                        <Canvas Width="76" Height="76">
                            <Path Width="42" Height="42" Canvas.Left="16.9999" Canvas.Top="17" Stretch="Fill" Fill="White" Data="F1 M 56.9999,19L 56.9999,57L 18.9999,57L 26.5829,49.417L 29.4158,52.25L 30.5354,51.1304L 27.7025,48.2975L 31.1408,44.8591L 35.2725,48.9908L 36.3921,47.8712L 32.2604,43.7396L 35.8973,40.1027L 38.5446,42.75L 39.6642,41.6304L 37.0169,38.9831L 40.4552,35.5448L 44.4012,39.4908L 45.5208,38.3712L 41.5748,34.4252L 45.1127,30.8873L 48.4158,34.1905L 49.5354,33.0709L 46.2323,29.7677L 49.3152,26.6848L 51.9783,29.3479L 53.0979,28.2283L 50.4348,25.5652L 56.9999,19 Z M 52.25,36.4167L 36.4167,52.25L 52.25,52.25L 52.25,36.4167 Z "/>
                        </Canvas>
                    </local:TileButton>

                    <local:TileButton Grid.Row="1" Grid.Column="2" Click="MenuButton_Click" Label="Menu" Background="#008000">
                        <!-- appbar.tiles.nine icon from ModernUIIcons.com -->
                        <Canvas Width="76" Height="76">
                            <Path Width="40" Height="40" Canvas.Left="18" Canvas.Top="18" Stretch="Fill" Fill="White" Data="F1 M 33,33L 43,33L 43,43L 33,43L 33,33 Z M 33,20L 43,20L 43,30L 33,30L 33,20 Z M 20,20L 30,20L 30,30L 20,30L 20,20 Z M 20,33L 30,33L 30,43L 20,43L 20,33 Z M 46,33L 56,33L 56,43L 46,43L 46,33 Z M 46,20L 56,20L 56,30L 46,30L 46,20 Z M 20,46L 30,46L 30,56L 20,56L 20,46 Z M 33,46L 43,46L 43,56L 33,56L 33,46 Z M 46,46L 56,46L 56,56L 46,56L 46,46 Z "/>
                        </Canvas>
                    </local:TileButton>
                </Grid>
            </Border>
        </Popup>
        
        <Popup x:Name="ExportPopup" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Center" IsLightDismissEnabled="True">
            <Popup.ChildTransitions>
                <TransitionCollection>
                    <PaneThemeTransition Edge="Top"/>
                </TransitionCollection>
            </Popup.ChildTransitions>
            <Border x:Name="ExportPopupBorder" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="{ThemeResource PhoneBackgroundBrush}" Width="{Binding PageWidth}" Height="330">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <TextBlock Text="SPECIFIC GAME" Margin="8,0,0,0" Grid.Row="0" Grid.ColumnSpan="3" Style="{ThemeResource TitleTextBlockStyle}" />

                    <local:TileButton Grid.Row="1" Grid.Column="0" Click="GameID_Click" Label="Game ID" Background="{ThemeResource PhoneAccentBrush}">
                        <TextBlock Text="&#xE13E;" FontSize="48" Foreground="White" FontFamily="Segoe UI Symbol" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </local:TileButton>

                    <local:TileButton Grid.Row="1" Grid.Column="1" Click="RandomSeed_Click" Label="Random" Background="{ThemeResource PhoneAccentBrush}">
                        <!-- appbar.potion icon from ModernUIIcons.com -->
                        <Canvas Width="76" Height="76">
                            <Path Width="38" Height="40" Canvas.Left="19" Canvas.Top="18" Stretch="Fill" Fill="White" Data="F1 M 28,18L 48,18L 48,22L 45,22L 45,29L 57,52L 54,58L 22,58L 19,52L 31,29L 31,22L 28,22L 28,18 Z M 28,54L 37,36L 43.8461,36L 41,31L 41,22L 35,22L 35,31L 23.8461,54L 28,54 Z "/>
                        </Canvas>
                    </local:TileButton>
                    
                    <TextBlock Text="PUZZLE FILES" Margin="8,6,0,0" Grid.Row="2" Grid.ColumnSpan="3" Style="{ThemeResource TitleTextBlockStyle}" />

                    <local:TileButton Grid.Row="3" Grid.Column="0" Click="LoadGame_Tapped" Label="Load game" Background="{ThemeResource PhoneAccentBrush}">
                        <TextBlock Grid.Row="0" Text="&#xE1A5;" FontSize="48" Foreground="White" FontFamily="Segoe UI Symbol" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </local:TileButton>

                    <local:TileButton Grid.Row="3" Grid.Column="1" Click="SaveGame_Tapped" Label="Save game" Background="{ThemeResource PhoneAccentBrush}">
                        <TextBlock Grid.Row="0" Text="&#xE105;" FontSize="48" Foreground="White" FontFamily="Segoe UI Symbol" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </local:TileButton>

                    <local:TileButton Grid.Row="3" Grid.Column="2" Click="ShareGame_Tapped" Label="Share game" Background="{ThemeResource PhoneAccentBrush}">
                        <!-- appbar.share icon from ModernUIIcons.com -->
                        <Canvas Width="76" Height="76">
                            <Path Width="47.5" Height="44.3333" Canvas.Left="12.6667" Canvas.Top="15.8333" Stretch="Fill" Fill="White" Data="F1 M 19,31.6667C 22.4978,31.6667 25.3333,34.5022 25.3333,38C 25.3333,40.0017 24.4047,41.7865 22.9548,42.9471C 24.9536,49.0304 30.5383,53.4894 37.2083,53.8333C 37.2083,56.2887 38.2245,58.5067 39.8593,60.0898L 38,60.1667C 27.79,60.1667 19.1923,53.2639 16.619,43.8706C 14.3012,42.9295 12.6667,40.6557 12.6667,38C 12.6667,34.5022 15.5022,31.6667 19,31.6667 Z M 45.125,15.8333C 48.6228,15.8333 51.4583,18.6689 51.4583,22.1667C 51.4583,25.6645 48.6228,28.5 45.125,28.5C 41.6337,28.5 38.8022,25.675 38.7917,22.1861C 38.5294,22.1732 38.2655,22.1667 38,22.1667C 31.8493,22.1667 26.5178,25.6738 23.896,30.7973C 22.5009,29.8471 20.8153,29.2917 19,29.2917L 17.559,29.4103C 20.9149,21.4339 28.8034,15.8333 38,15.8333C 39.6024,15.8333 41.165,16.0034 42.6709,16.3263C 43.4256,16.0088 44.2548,15.8333 45.125,15.8333 Z M 45.9167,47.5C 47.3141,47.5 48.6058,47.9526 49.6532,48.7191C 52.2485,45.8991 53.8333,42.1347 53.8333,38C 53.8333,34.5408 52.724,31.3407 50.8417,28.736C 52.6012,27.2036 53.7393,24.9758 53.8278,22.4809C 57.7488,26.4794 60.1667,31.9574 60.1667,38C 60.1667,44.8738 57.0379,51.0169 52.1268,55.0828C 51.5466,57.9822 48.9868,60.1667 45.9167,60.1667C 42.4189,60.1667 39.5833,57.3311 39.5833,53.8333C 39.5833,50.3355 42.4189,47.5 45.9167,47.5 Z "/>
                        </Canvas>
                    </local:TileButton>
                </Grid>
            </Border>
        </Popup>
    </Grid>

    <Page.BottomAppBar>
        <CommandBar>
            <CommandBar.PrimaryCommands>
                <AppBarButton x:Name="ToolButton" Label="?" Click="ToolButton_Click" Visibility="Collapsed" />
                <AppBarToggleButton x:Name="LeftRightButton" Label="?" Checked="LeftRightButton_Checked" Unchecked="LeftRightButton_Unchecked" Visibility="Collapsed" />
                <AppBarButton x:Name="UndoButton" Label="undo" Click="UndoButton_Click">
                    <AppBarButton.Icon>
                        <FontIcon FontFamily="Segoe UI Symbol" Glyph="&#xE10E;"/>
                    </AppBarButton.Icon>
                </AppBarButton>
                <AppBarButton x:Name="RedoButton" Label="redo" Click="RedoButton_Click">
                    <AppBarButton.Icon>
                        <FontIcon FontFamily="Segoe UI Symbol" Glyph="&#xE10D;"/>
                    </AppBarButton.Icon>
                </AppBarButton>
                <AppBarButton Label="help" Icon="Help" Click="HelpButton_Click"/>
            </CommandBar.PrimaryCommands>
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="new game" Click="NewButton_Click"/>
                <AppBarButton x:Name="TypeButton" Label="type" Click="TypeButton_Click"/>
                <AppBarButton Label="restart" Click="RestartButton_Click"/>
                <AppBarButton Label="load / save" Click="LoadSaveButton_Click"/>
                <AppBarButton x:Name="SolveButton" Label="show solution" Click="SolveButton_Click"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
</Page>